<template>
  <div ref="echartDom" v-bind="$attrs"></div>
</template>

<script setup>
import { ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose, defineEmits } from 'vue'
import { pxToRem } from "@/utils/index";

const props = defineProps({
  lineData: {
    type: Object,
    default: () => {
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const emit = defineEmits(['dialogData'])
const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let tempSeriesData = []
    tempSeriesData.push({
      data: props?.lineData?.lineData[0],
      type: 'line',
      name: props?.lineData?.legendData?.[0],
      stack: props?.lineData?.legendData?.[0],
      smooth: false,
      showSymbol: false,
    })
    tempSeriesData.push({
      data: props?.lineData?.lineData[1],
      type: 'line',
      name: props?.lineData?.legendData?.[1],
      stack: props?.lineData?.legendData?.[1],
      smooth: false,
      showSymbol: false,
    })
    tempSeriesData.push({
      data: [],
      type: 'line',

      markLine: {
				symbol: ['none', 'none'], //去掉箭头
				silent: true,
				lineStyle: {
					color: 'rgba(87,69,140)',
					type: 'dashed',
					width: pxToRem(2),   //宽度
				},
				label: {
					color: 'white',
					fontSize: pxToRem(14),
					formatter: () => '预测'
				},
				data: [
					{
						xAxis:	props?.lineData?.xAxisData?.length - props?.lineData?.forecastIndex
					}
				]
			},
    })
    let option = {
      tooltip: {
        trigger: 'axis',
        formatter: (val) => {
          let doms = ''
          val.forEach((x, i) => {
            doms += `${x.marker + x.seriesName}：${x.value}万㎡` + '<br>'
          })
          return (
            `${val[0].name}` + '<br>' + doms
          )
        }
      },
      barMaxWidth: pxToRem(11 * props?.dialogData?.fontSizeTimes),
      legend: {
        icon: 'rect',
        x: 'center',
        y: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 0),
        itemWidth: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        itemHeight: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        textStyle: {
          color: 'white',
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
        },
        data: props?.lineData?.legendData
      },
      grid: {
        left: pxToRem(10),
        right: pxToRem(16),
        bottom: pxToRem(15),
        top: pxToRem(70),
        containLabel: true
      },

      dataZoom: { // 数据过多内部拖动逻辑
        show: true,
        type: "slider",
        left: pxToRem(30),
				right: pxToRem(20),
				bottom: pxToRem(13),
				height: pxToRem(22),
        startValue: props?.lineData?.dataZoomStartValue,
        endValue: props?.lineData?.xAxisData?.length - 1,
      },
      xAxis: {
        type: 'category',
        data: props?.lineData?.xAxisData,
        offset: pxToRem(5),
        axisLabel: {
          fontSize: pxToRem(12),
          color: '#FFFFFF',
  
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: true, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
      },
      yAxis: {
        name: '万㎡',
        nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 25),
        min: 0,
        max: (value) => value.max || 1000,
        nameTextStyle: {
          color: '#959699',
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          padding: [0, 0, 0, pxToRem(-10 * props?.dialogData?.fontSizeTimes)]
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#31679C",
            type: "dashed",
          },
        },
        axisLabel: {
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          color: '#959699'
        },

        position: 'left',
      },
      series: tempSeriesData
    }
    console.log(option)
    option && myChart.value.setOption(option, true);

    myChart.value.getZr().on("click", (params) => {
      emit('dialogData', option)
    });
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h250 {
  height: 250px;
}

.dialog-h250 {
  width: 1120px;
  height: 500px;
}
</style>